<template>
  <div class="container">
    <div class="section header clearfix">
      <div class="logo"
           @tap="changeHeader()">
        <img :src="header_img==''?base_url+'/mp_2.0/wode/gerenshezhi--tuxiang@2x.png':imgUrl+header_img"
             v-if="base_url&&imgUrl"
             alt=""
             class="header-img"
             mode="widthFix">
      </div>
      <div class="msg"
           @tap="changeHeader()">点击修改头像</div>
    </div>
    <div class="section form">
      <div class="item clearfix">
        <div class="left">
          昵称
        </div>
        <div class="right">
          <input type="text"
                 v-model="nickname"
                 class="inp"
                 placeholder="请输入2-12位中英文昵称"
                 maxlength="12">
        </div>
      </div>
      <div class="item clearfix">
        <div class="left">
          性别
        </div>
        <div class="right clearfix">
          <div class="sex"
               @tap="select_sex(1)">
            <div class="lable">
              <img v-if="sex==1&&base_url"
                   :src="base_url+'/mp_2.0/wode/Grou231@2x.png'"
                   class="icon"
                   alt="">
            </div>男
          </div>
          <div class="sex"
               @tap="select_sex(2)">
            <div class="lable">
              <img v-if="sex==2&&base_url"
                   :src="base_url+'/mp_2.0/wode/Grou231@2x.png'"
                   class="icon"
                   alt="">
            </div>女
          </div>
        </div>
      </div>
      <picker mode="date"
              :end="max_date"
              @change="change_birthday">
        <div class="item clearfix">
          <div class="left">
            生日
          </div>
          <div class="right">
            <input type="text"
                   class="inp"
                   placeholder="请选择"
                   disabled
                   v-model="birthday">
          </div>
        </div>
      </picker>
      <a class="item clearfix"
         href="/pages/package_mine/select_city_address_new/main">
        <div class="left">
          地区
        </div>
        <div class="right">
          <input type="text"
                 class="inp"
                 placeholder="请选择"
                 disabled
                 v-model="address_str">
        </div>
      </a>
    </div>

    <div class="section form">
      <picker mode="selector"
              :range="professional_arr"
              range-key="name"
              @change="change_profession">
        <div class="item clearfix">
          <div class="left">
            职业
          </div>
          <div class="right">
            <input type="text"
                   class="inp"
                   placeholder="请选择"
                   disabled
                   v-model="professional">
          </div>
        </div>
      </picker>
      <picker :range="income_arr"
              @change="change_income"
              range-key="name">
        <div class="item clearfix">
          <div class="left">
            收入
          </div>
          <div class="right">
            <input type="text"
                   class="inp"
                   placeholder="请选择"
                   disabled
                   v-model="income">
          </div>
        </div>
      </picker>
      <picker :range="marital_status_arr"
              @change="change_marital_status"
              range-key="name">
        <div class="item clearfix">
          <div class="left">
            婚姻状况
          </div>
          <div class="right">
            <input type="text"
                   class="inp"
                   placeholder="请选择"
                   disabled
                   v-model="marital_status_str">
          </div>
        </div>
      </picker>
    </div>
    <div class="sub-btn"
         @tap="save_info()">
      保存
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import fly_post from "@/assets/js/fly_post.js";
import imageurl from "@/assets/js/image.js";
export default {
  data () {
    return {
      header_img: "",
      base_url: common.image_resource,
      sex: "",
      imgUrl: common.image_response,
      max_date:
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1) +
        "-" +
        new Date().getDate(),
      professional: "",
      professional_arr: [
        { name: "国家机关、党群组织、企业、事业单位" },
        { name: "专业技术人员" },
        { name: "办事人员和有关人员" },
        { name: "商业、服务业人员" },
        { name: "农、林、牧、渔、水利生产人员" },
        { name: "生产、运输设备操作人员及相关人员" },
        { name: "军人" },
        { name: "不便分类的其他从业人员" }
      ],
      income: "",
      income_arr: [
        { name: "5K以下" },
        { name: "5K-8K " },
        { name: "8K-12K" },
        { name: "12K-20K" },
        { name: "20K以上" }
      ],
      marital_status: "",
      marital_status_str: "",
      marital_status_arr: [
        { name: "保密" },
        { name: "未婚" },
        { name: "已婚" }
      ],
      user_data: "",
      user_info: "",
      birthday: "",
      province_id: "",
      city_id: "",
      area_id: "",
      address_str: "",
      nickname: ""
    };
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: "个人设置"
    });
    Object.assign(this.$data, this.$options.data());
    this.get_userinfo();
  },
  methods: {
    changeHeader () {
      let that = this;
      wx.chooseImage({
        count: 1,
        sizeType: ["compressed "],
        success (res) {
          wx.uploadFile({
            url: common.base_url + "api/v4_5/upload", //开发者服务器 url
            filePath: res.tempFilePaths[0], //要上传文件资源的路径
            name: "file", //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
            formData: {
              dirPath: "head_portrait",
              upload_status: true
            },
            header: {},
            success: response => {
              let re = JSON.parse(response.data);
              that.header_img = re.data.url;
            },
            fail: () => {
              common.mmk_Loading(2, "图片上传失败")
            }
          });
        },
        fail () {
          common.mmk_Loading(2, "图片选取失败")
        }
      });
    },
    // 选择性别
    select_sex (sex) {
      this.sex = sex;
    },
    change_birthday (e) {
      this.birthday = e.mp.detail.value;
    },
    change_profession (e) {
      this.professional = this.professional_arr[e.mp.detail.value - 0].name;
    },
    change_income (e) {
      this.income = this.income_arr[e.mp.detail.value - 0].name;
    },
    change_marital_status (e) {
      this.marital_status = e.mp.detail.value - 0;
      this.marital_status_str = this.marital_status_arr[
        e.mp.detail.value - 0
      ].name;
    },
    get_userinfo () {
      common.mmk_Loading(0)
      setTimeout(() => {
        common.fly_post("api/v4_5/my_info_detail", {}, result => {
          let res = result.data;
          common.mmk_Loading(1)
          if (res.status_code == 0) {
            let user_info = res.data;
            this.nickname = user_info.nickname || "";
            this.sex = user_info.sex;
            this.birthday = user_info.birthday || "";
            this.professional = user_info.workplace || "";
            this.income = user_info.income || "";
            this.marital_status = user_info.marriage || "";
            this.marital_status_str =
              this.marital_status_arr[user_info.marriage - 0].name || "";
            this.header_img = user_info.avatar || "";
            if (user_info.province_name !== '') {
              this.address_str = `${user_info.province_name} ${
                user_info.city_name
                }市 ${user_info.area_name}`;
              this.province_id = user_info.province;
              this.city_id = user_info.city;
              this.area_id = user_info.area;
            }

          } else {
            common.mmk_Loading(2, res.message)
          }
        })
      }, 200);
    },
    save_info () {
      common.mmk_Loading(0)
      common.fly_post("api/v4_5/user/update", {
        nickname: this.nickname,
        sex: this.sex,
        birthday: this.birthday,
        province: this.province_id,
        city: this.city_id,
        area: this.area_id,
        workplace: this.professional,
        income: this.income,
        marriage: this.marital_status,
        headimgurl: this.header_img
      }, result => {
        common.mmk_Loading(1)
        let res = result.data;
        if (res.status_code == 0) {
          wx.showToast({
            title: "个人信息修改成功", //提示的内容,
            icon: "none", //图标,
            duration: 2000, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => {
              setTimeout(() => {
                wx.removeStorage({
                  key: "address_data",
                  success: res => {
                    wx.navigateBack({
                      delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                    });
                  }
                });
              }, 1500);
            }
          });
        } else {
          common.mmk_Loading(2, res.message)
        }
      })
    }
  },
  onShow () {
    let that = this;
    wx.getStorage({
      key: "address_data",
      success: res => {
        let info = JSON.parse(res.data);
        that.province_id = info.province_id;
        that.city_id = info.city_id;
        that.area_id = info.area_id;
        that.address_str = `${info.province_name} ${info.city_name}市 ${
          info.area_name
          }`;
      },
      fail: () => { },
      complete: () => { }
    });
  },
  onUnload () {
    wx.removeStorage({
      key: "address_data",
      success: res => { }
    });
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  .section {
    width: 100%;
    margin-bottom: 10px;
  }
  .header {
    background-color: #fff;
    .logo {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin: 15px auto 10px;
      position: relative;
      overflow: hidden;
      .header-img {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .msg {
      text-align: center;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      margin-bottom: 15px;
    }
  }
  .form {
    .item {
      display: flex;
      height: 44px;
      background-color: #fff;
      margin-bottom: 1px;
      .left {
        width: 60px;
        margin-left: 15px;
        line-height: 44px;
        font-size: 14px;
        font-family: "Medium";
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
      .right {
        flex: 1;
        margin-left: 32px;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 44px;
        .sex {
          float: left;
          margin-right: 40px;
          .lable {
            display: inline-block;
            vertical-align: middle;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px solid #ccc;
            margin-right: 8px;
            position: relative;
            overflow: hidden;
            .icon {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
        .inp {
          width: 100%;
          height: 100%;
          line-height: 44px;
        }
      }
    }
  }
  .sub-btn {
    width: 100%;
    height: 50px;
    background: rgba(255, 56, 62, 1);
    line-height: 50px;
    text-align: center;
    font-size: 17px;
    font-family: "Medium";
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    position: fixed;
    bottom: 0;
  }
}
</style>


